<template>
  <div class="container-fans">
      <el-card>
        <div slot="header" class="clearfix">
          <my-bread>个人设置</my-bread>
        </div>
        <!-- 栅格布局 总的span=24 -->
        <el-row>
          <el-col :span="12">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="编号" prop="id">
                {{ruleForm.id}}
              </el-form-item>
              <el-form-item label="手机" prop="mobile">
                {{ruleForm.mobile}}
              </el-form-item>
              <el-form-item label="媒体名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="媒体介绍" prop="intro">
                <el-input type="textarea" v-model="ruleForm.intro"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="hUpdate('ruleForm')">保存</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 头像上传 -->
          <el-col :span="12">
            <el-upload
              class="avatar-uploader"
              action=""
              :http-request="uploadPhoto"
              :show-file-list="false">
              <img v-if="ruleForm.photo" :src="ruleForm.photo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-row>
      </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ruleForm: {
        id: '',
        name: '',
        // 内容
        intro: '',
        // 图片
        photo: '',
        // 邮件
        email: '',
        // 手机号
        mobile: ''
      },
      imageUrl: '',
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入正确的邮箱', trigger: 'change' },
          { pattern: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/, message: '邮箱格式不正确', trigger: 'change' }
        ],
        intro: [
          { required: true, message: '请说明介绍内容', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.loadInfo()
  },
  methods: {
    // 保存设置
    hUpdate (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert('submit!')
          // 2. 请求接口，保存修改结果
          const result = await this.$http({
            method: 'PATCH',
            url: '/mp/v1_0/user/profile',
            data: {
              name: this.ruleForm.name,
              intro: this.ruleForm.intro,
              email: this.ruleForm.email
            }
          })
          console.log('修改后信息：', result)
          this.$message.success('修改成功')
          // 传递给layout界面
          this.$eventBus.$emit('name', this.ruleForm.name)
          // this.$eventBus.$emit('photo', this.ruleForm.photo)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 获取基本信息
    async loadInfo () {
      const result = await this.$http({
        method: 'get',
        url: '/mp/v1_0/user/profile'
      })
      console.log('个人信息：', result)
      this.ruleForm = result.data.data
    },
    // 更新图片
    async uploadPhoto (obj) {
      // 1. 获取本次要上传的文件
      console.log('uploadPhoto....', obj)
      const { file } = obj
      // 2.发请求，更新头像
      // 这个接口本质做的是文件上传，所以传参时，不能用普通的对象格式。
      // 而应该使用formData
      const fd = new FormData()
      fd.append('photo', file)
      const result = await this.$http({
        method: 'PATCH',
        url: '/mp/v1_0/user/photo',
        data: fd
        // data: {
        //   photo: file
        // }
      })
      console.log(result)
      // 如果操作成功，则后端返回结果中会包含本次上传的图片的地址
      // 3. 更新
      this.ruleForm.photo = result.data.data.photo

      // 4. 通过eventBus通过layout.vue组件去更新头像
      // 发布事件
      this.$eventBus.$emit('photo', result.data.data.photo)
    }
  }
}
</script>

<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px solid #eeeeee;
    margin: auto 100%
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    margin: auto 100%
  }
</style>
